<template>
    <div class="content">
        <div class="pb10 mt10">
            <Table border class="mt20" :columns="columns2" :data="data2">
                <template slot-scope="{ row, index }" slot="action">
                    <div class="cursor cr2d8cf0" @click="seeDetail(row)">设置</div>
                </template>
            </Table>
        </div>
        <Modal
            v-model="isShow"
            title="消息接收方设置"
            width="480">
            <Table border class="mt10"
                   :columns="columns3"
                   :data="data3">
                <template slot-scope="{ row, index }" slot="action">
                    <span class="cursor mr10 cr2d8cf0" @click="delInfo(row,1)">删除</span>
                </template>
            </Table>
            <div class="add-info mt20 ac" v-if="!isEditShow" @click="addInfo"><Icon type="md-add" />新增消息接收人</div>
            <div slot="footer">
                <Button type="text" size="large" @click="isShow=false">取消</Button>
                <Button  size="large" @click="settButon">确定</Button>
            </div>
        </Modal>
        <Modal
                v-model="isEditShow"
                title="用户列表"
                width="480">
            <Table border class="mt10"
                   ref="selection"
                   :columns="columns4"
                   :data="userList"
                   @on-select="handleSelect"
                   @on-select-cancel='tableSelectCancel'
                   @on-select-all="handleSelectAll"
                   @on-select-all-cancel='tableSelectAllCancel'>
            </Table>
            <div class="disflex mt30">
                <Page :total="total" v-if="total>10" :current="page.page" show-elevator @on-change="changepage"></Page>
            </div>
            <div slot="footer">
                <Button type="text" size="large" @click="editCancel">取消</Button>
                <Button  size="large" @click="editSubmit">确定</Button>
            </div>
        </Modal>
        <Modal
                v-model="isShow2"
                title="删除"
                @on-ok="delInfo('',2)"
                @on-cancel="isShow2=false" width="450">
            <div class="input-item">
                确定删除消息接收人？
            </div>
        </Modal>
    </div>
</template>
<script>
    import {
        msgConfigList,
        msgConfigSave,
        messageReceiverList,
        messageReceiverDelete,
        messageReceiverAdd
    } from '../../../api/message';
    import { userList } from '@/api/systemManage'
    export default {
        data () {
            return {
                total:0,//总条数
                page:{
                    pageSize:10,
                    page:1
                },
                userList:[],
                selectList1:[
                    {
                        'id':11,
                        'name':'隐患逾期1'
                    },{
                        'id':12,
                        'name':'隐患逾期2'
                    },{
                        'id':13,
                        'name':'隐患逾期3'
                    },{
                        'id':14,
                        'name':'隐患逾期3'
                    },{
                        'id':15,
                        'name':'隐患逾期3'
                    },{
                        'id':16,
                        'name':'隐患逾期3'
                    }
                ],
                editCondition:{
                    name:'',
                    email:'',
                    phone:''
                },
                columns2:[{
                        title: '消息类型',
                        key: 'trigger_name',
                     },
                    {
                        title: '站内推送',
                        slot: 'is_station_push',
                        render: (h, params) => {
                            //return h('元素',{元素的性质},'内容')
                            return h('i-switch', {
                                    props: {
                                        value: params.row.is_station_push==1
                                    },
                                    on: {
                                        'on-change': (value) => {
                                            if(value){
                                                params.row.is_station_push = 1
                                            }else{
                                                params.row.is_station_push = 0
                                            }
                                            let that = this
                                            that.getSwitch(params.row)

                                        }
                                    }
                                },
                                [h('span', {
                                    slot: "open",
                                    domProps: {
                                        innerHTML: '开'
                                    }
                                }),
                                    h('span', {
                                        slot: "close",
                                        domProps: {
                                            innerHTML: '关'
                                        }
                                    }),
                                ]
                            )
                        }
                    },
                    {
                        title: '短信推送',
                        slot: 'is_sms_push',
                        render: (h, params) => {
                            //return h('元素',{元素的性质},'内容')
                            return h('i-switch', {
                                    props: {
                                        value: params.row.is_sms_push==1
                                    },
                                    on: {
                                        'on-change': (value) => {
                                            if(value){
                                                params.row.is_sms_push = 1
                                            }else{
                                                params.row.is_sms_push = 0
                                            }
                                            let that = this
                                            that.getSwitch(params.row)

                                        }
                                    }
                                },
                                [h('span', {
                                    slot: "open",
                                    domProps: {
                                        innerHTML: '开'
                                    }
                                }),
                                    h('span', {
                                        slot: "close",
                                        domProps: {
                                            innerHTML: '关'
                                        }
                                    }),
                                ]
                            )
                        }
                    },
                    {
                        title: '电话推送',
                        slot: 'is_voice_push',
                        render: (h, params) => {
                            //return h('元素',{元素的性质},'内容')
                            return h('i-switch', {
                                    props: {
                                        value: params.row.is_voice_push==1
                                    },
                                    on: {
                                        'on-change': (value) => {
                                            if(value){
                                                params.row.is_voice_push = 1
                                            }else{
                                                params.row.is_voice_push = 0
                                            }
                                            let that = this
                                            that.getSwitch(params.row)

                                        }
                                    }
                                },
                                [h('span', {
                                    slot: "open",
                                    domProps: {
                                        innerHTML: '开'
                                    }
                                }),
                                    h('span', {
                                        slot: "close",
                                        domProps: {
                                            innerHTML: '关'
                                        }
                                    }),
                                ]
                            )
                        }
                    },
                    // {
                    //     title: '消息接收方',
                    //     slot: 'action'
                    // }
                ],
                columns3:[
                    {
                        title: '姓名',
                        key: 'real_name'
                    },
                    {
                        title: '手机',
                        width: 140,
                        key: 'mobile'
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 120,
                        align: 'center'
                    }
                ],
                columns4:[
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        className: 'test-name'
                    },
                    {
                        title: '姓名',
                        key: 'real_name'
                    },
                    {
                        title: '手机',
                        width: 140,
                        key: 'mobile'
                    }
                ],
                data2: [],
                data3:[],
                isShow:false,//设置
                idArr:[],
                isEditShow:false,
                checkAllGroup0: [],//选择的数组
                checkAllGroup1: [],//选择的数组
                checkAllGroup2: [],//选择的数组
                checkAllGroup3: [],//选择的数组
                indeterminate0: false,
                indeterminate1: false,
                indeterminate2: false,
                indeterminate3: false,
                checkAll0: false,//全选
                checkAll1: false,//全选
                checkAll2: false,//全选
                checkAll3: false,//全选
                isShow2:false,
                user_id:'',
                trigger_id:''

            }
        },
        created(){
            console.log(this.$route.params.id)
            this.getList();
            this.getUserList();
        },
        methods: {
            //获取用户列表
            getUserList(){
                let that = this;
                userList(that.page).then(res => {
                    that.userList = res.data.data;
                    this.userList.map(r=>{
                        r._checked = false
                        return r._checked
                    })
                    that.total = res.data.count
                })
            },
            //获取设置列表
            getList(){
                let that = this;
                msgConfigList().then(res => {
                    that.data2 = res.data
                })
            },
            //获取消息接收人列表
            getMessageReceiverList(){
                let that = this;
                let data = {
                    trigger_id:this.trigger_id
                }
                messageReceiverList(data).then(res => {
                    this.data3 = res.data
                })
            },
            getSwitch(row,type){
                let that = this;
                if(type==1){
                    if(row.is_enable==0){
                        row.is_sms_push = 0
                        row.is_station_push = 0
                        row.is_voice_push = 0
                    }else{
                        row.is_station_push = 1
                    }
                }
                if(row.is_sms_push==0&&row.is_station_push==0&&row.is_voice_push==0){
                    row.is_enable=0
                }
                if(row.is_sms_push==1||row.is_station_push==1||row.is_voice_push==1){
                    row.is_enable=1
                }
                let data ={
                    trigger_id:row.id,
                    is_sms_push:row.is_sms_push,
                    is_station_push:row.is_station_push,
                    is_voice_push:row.is_voice_push,
                    is_enable:1,
                }
                msgConfigSave(data).then(res => {
                    if(res.errno==0){
                        that.getList();
                    }
                })
            },
            //分页
            changepage(page){
                this.page.page = page
                this.getUserList()
            },
            seeDetail(row){
                this.isShow = true
                let data = {
                    trigger_id:row.id
                }
                this.trigger_id = row.id
                this.data3 = [];
                messageReceiverList(data).then(res => {
                    this.data3 = res.data
                })
            },
            //删除接收人
            delInfo(row,type){
                if(type==1){
                    this.user_id = row.id
                    this.isShow2 = true;
                }else{
                    let data = {
                        trigger_id:this.trigger_id,
                        user_id:this.user_id,
                    }
                    console.log(data)
                    messageReceiverDelete(data).then(res => {
                        //this.isShow2 = false
                        this.getMessageReceiverList();
                    })
                }
            },
            //新增接收人
            addInfo(){
                this.idArr = []

                // this.userList.map(r=>{
                //     r._checked = false
                //     return r._checked
                // })
                // console.log(this.userList)
                this.getUserList();
                this.page.page = 1
                this.isEditShow = true

            },
            //设置确认
            settButon(){
                this.isShow = false
                this.getList()
            },
            //新增确认
            editSubmit(){
                let data = {
                    trigger_id:this.trigger_id,
                    user_id:this.idArr.toString(),
                }
                messageReceiverAdd(data).then(res => {
                    this.isShow2 = false
                    this.getMessageReceiverList();
                })
                this.isEditShow = false
            },
            //编辑取消
            editCancel(){
                this.isEditShow = false
            },
            //全选
            handleSelectAll (status) {
                let that = this
                let selectAll = this.$refs.selection.getSelection()
                for(let i in selectAll){
                    // selectAll[i]._checked = true
                    that.idArr.push(selectAll[i].id)
                }
                // console.log(that.idArr)
            },
            //全选取消
            tableSelectAllCancel(e){
                this.userList.map(r=>{
                    // r._checked = false
                    return r._checked
                })
                this.idArr = []
            },
            //单选
            handleSelect(selection,row){
                let newArr = []
                for(let i in selection){
                    // selection[i]._checked = true
                    newArr.push(selection[i].id)
                }
                this.idArr = newArr
            },
            //单选取消
            tableSelectCancel(selection,row){
                let newArr = []
                for(let i in selection){
                    // selection[i]._checked = false
                    newArr.push(selection[i].id)
                }
                this.idArr = newArr
            },

        }
    }
</script>
